<template>
  <el-pagination
    v-model:current-page="currentPage"
    :page-sizes="[3, 5, 10, 20]"
    :page-size="pageSize"
    :total="$total"
    layout="total, sizes, prev, pager, next, jumper"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    background>
  </el-pagination>
</template>

<script setup lang="ts">
import {  toRefs } from 'vue'
import { emitter,useDepartmentStore } from '@/stores/department.store.ts'
import { storeToRefs } from 'pinia'

const store = useDepartmentStore()
const { pagination } = storeToRefs(store)
const { pageSize, currentPage, $total } = toRefs(pagination.value)
const {
} = store

function handleSizeChange(val: number) {
  pageSize.value = val
  emitter.emit('pagination_page_size_changed')
}

function handleCurrentChange(val: number) {
  currentPage.value = val
  emitter.emit('pagination_current_page_changed')
}


</script>

<style scoped lang="scss">

</style>
